import Child from "./Child"
import UseState from "./basic/UseState"
import UseRef from "./basic/UseRef"
import Father from "./basic/ByVal/Father"
import UseEffect from "./basic/UseEffect"
import UseHook from "./basic/UseHook"
import Redux from "./basic/Redux"

function App() {
  const count = 100
  const getName = () => {
    return 'this is getName'
  }
  const list = [
    { id: 1, name: 'one' },
    { id: 2, name: 'two' },
    { id: 3, name: 'three' }
  ]
  const flag = true
  const loading = true
  const status = 3
  const getStatus = () => {
    if (status === 1) {
      return <div>状态1</div>
    } else if (status === 2) {
      return <div>状态2</div>
    } else {
      return <div>状态其他</div>
    }
  }
  const handleClick = (e) => {
    console.log('点击', e)
  }
  const handleParams = (name, e) => {
    console.log('name', name, e)
  }
  return (
    <div className="App">
      {'this is App'}
      {count}
      {getName()}
      {new Date().getDate()}
      <div style={{ color: 'red' }}>this is div</div>
      <ul>
        {list.map(item => <li key={item.id}>{item.id}-{item.name}</li>)}
      </ul>
      {/* 条件渲染 */}
      {flag ? <div>flag</div> : <div>not flag</div>}
      {loading && <span> loading</span>}
      {getStatus()}
      <button onClick={handleClick}>点击</button>
      <button onClick={(e) => { handleParams('react', e) }}>传参</button>
      <Child></Child>
      <UseState></UseState>
      <UseRef></UseRef>
      <Father></Father>
      <UseEffect></UseEffect>
      <UseHook></UseHook>
      <Redux></Redux>
    </div >
  );
}
export default App;
